<template>

  <router-view></router-view>
  <div style="height: 100%;display: flex;flex-direction: column" v-if="$route.name==='permission_user'">


    <el-row>
      <div class="center-form">


        <el-card class="box-card" style="width: 100%;">
          <el-form :model="state.page.condition" :inline="true" label-width="120px" class="form-inline" ref="formRef">
            <el-row>
              <el-col :span="8">
                <el-form-item label="用户ID" prop="userId">
                  <el-input v-model="state.page.condition.userId" placeholder="用户ID"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="state.page.condition.username" placeholder="用户名"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="真实姓名" prop="realname">
                  <el-input v-model="state.page.condition.realname" placeholder="真实姓名"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="state.page.condition.email" placeholder="邮箱"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="state.page.condition.phone" placeholder="手机号"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-card>
      </div>
    </el-row>

    <el-row class="btn-group">
      <div class="left-btn">
        <el-button @click="toggleAllSelection">全选</el-button>

      </div>
      <div class="right-btn">
        <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
        <el-button type="info" @click="resetForm(formRef)" :icon="Minus">清空</el-button>
        <el-button type="success" @click="toAdd" :icon="CirclePlus">用户添加</el-button>
        <el-button type="danger" :icon="Delete">批量删除</el-button>
      </div>
    </el-row>

    <el-table
        :data="state.data"
        border
        ref="tableRef"
        v-loading="state.loading"
        element-loading-text="正在加载..."
        :empty-text="state.empty"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        @selection-change="handleSelectionChange"
        style="flex: 1;">
      <el-table-column type="selection" width="55" fixed/>
      <template v-for="item in columns">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth">
          <template #default="scope" v-if="item.render">
            <render-column :render="item.render" :scope="scope" :item="item"></render-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination-block">
      <el-pagination
          background
          layout="total,prev, pager, next,jumper,sizes"
          @size-change="sizeChange"
          @current-change="currentChange"
          :page-sizes="[10, 20, 30, 40]"
          v-model:current-page="state.page.current" v-model:page-size="state.page.size" v-model:total="state.page.total"/>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {onMounted, reactive, ref, h} from "vue";
import {getUserList, getUserPage} from "@/api/backend/user/user.js";
import {ElMessage} from "element-plus";
import RenderColumn from "@/components/RenderColumn/index.vue";
import {useRoute, useRouter} from "vue-router";
import { Delete, Plus, Search, Minus, CirclePlus } from '@element-plus/icons-vue'
import {getPageInfo, setPageInfo} from "@/api/util/user/list/index.js";
const pageInfo=getPageInfo()
const state=reactive({
  data:[],
  loading:true,
  pageInfo:pageInfo,
  page:{
    current: pageInfo.current,
    size: pageInfo.size,
    total: 0,
    condition: {username: "", realname: "", userId: null, email: "", phone: ""}
  },
  empty:"暂无数据"
})

const formRef=ref()
const tableRef=ref()

const resetForm = (formEl) => {
  formEl.resetFields()
}

const columns = [
  {
    prop: "userId",
    label: "用户ID",
    minWidth:'160px'
  },

  {
    prop: "username",
    label: "用户名",
    minWidth:'160px',
  },
  {
    prop: "realname",
    label: "真实姓名",
    minWidth:'160px',
  },
  {
    prop: "email",
    label: "邮箱",
    minWidth:'160px'
  },
  {
    prop: "phone",
    label: "手机号",
    minWidth:'160px',
  },
  {
    prop: "avatar",
    label: "头像",
    minWidth:'160px',
    render(h, row, column, item) {

      return  <ElAvatar size={40} src={import.meta.env.VITE_PIC_BASE_URL+row[item.prop]}><img src={import.meta.env.VITE_PIC_BASE_URL+'/guigu-pick/images/0fc7d20532fdaf769a25683617711png.png'} alt=""/>
      </ElAvatar>
    }
  },
  {
    prop: "encryptedType",
    label: "加密方式",
    minWidth:'160px',
    render(h, row, column, item) {
      const enType=row[item.prop]
      switch (enType){
        case "1":return "Bcrypt"
        case "2":return "MD5"
        case "3":return "不加密"
        default: return "未知加密类型"
      }
    }
  },
  {
    prop: "createTime",
    label: "创建时间",
    minWidth:'160px',
  },
  {
    prop: "updateTime",
    label: "更新时间",
    minWidth:'160px',
  },
  {
    prop: "operate",
    label: "操作",
    render(h, row, column, item) {
      return <ElButtonGroup>
        <ElButton size="small" type="warning" style="margin-right:5px;" onClick={()=>{showRole(row['userId'])}}>角色</ElButton>
        <ElButton size="small" type="danger" style="margin-left:5px;">权限</ElButton>
      </ElButtonGroup>
    },
    minWidth:'160px',
    fixed:'right'
  }

]

const refreshPage = () => {
  state.loading = true

  let result = getUserPage(state.page).then(result => {
    state.data = result.data.records
    state.page.total = result.data.total
    state.loading = false
    state.empty = "暂无数据"
  }).catch(e => {
    state.loading = false;
    state.empty = e.msg
    ElMessage({
      type: "error",
      message: e.msg,
      duration: 3000
    })
  })

}

onMounted(() => {
  refreshPage()
})

function sizeChange(num) {
  state.page.current=1
  setPageInfo({current:state.page.current,size:num})
  refreshPage()
}

function currentChange(current) {
  setPageInfo({current:current,size:state.page.size})
  refreshPage()
}

function handleSelectionChange(select) {
}

function toggleAllSelection() {
  tableRef.value.toggleAllSelection()
}

const $router = useRouter()

function toAdd() {

  $router.push("/user/add")
}

function showRole(userId){
  $router.push("/permission/user/role/"+userId)
}

function onSubmit() {
  refreshPage()
}
</script>


<script>
</script>
<style scoped>
.pagination-block {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-group {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.center-form {
  width: 100%;
  display: flex;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>